<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选反选</title>
    
</head>
<body>
    <h1>全选反选示例</h1>
    <div>
        <button id="select-all">全选</button>
        <button id="deselect-all">取消</button>
        <button id="toggle-selection">反选</button>
    </div>
    <ul>
        <li><input type="checkbox" class="item-checkbox"> 项目 1</li>
        <li><input type="checkbox" class="item-checkbox"> 项目 2</li>
        <li><input type="checkbox" class="item-checkbox"> 项目 3</li>
        <li><input type="checkbox" class="item-checkbox"> 项目 4</li>
    </ul>
</body>
</html>
<script>
    /**
     * 全选/取消/反选函数
     */
    function selectAll(checkboxes, isChecked) {
        /**
         * 遍历所有的复选框，将它们的选中状态设置为指定的值
         * 将其checked属性设置为传入的isChecked参数的值
         * forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
         */
        checkboxes.forEach(checkbox => checkbox.checked = isChecked);
    }

    /**
     * 反选函数
     * 遍历所有的复选框，将它们的选中状态取反
     */
    function toggleSelection(checkboxes) {
        checkboxes.forEach(checkbox => checkbox.checked = !checkbox.checked);
    }

    document.addEventListener('DOMContentLoaded', () => {
        //获取所有带着 item-checkbox 类的复选框元素，并转化为数组
        const checkboxes = Array.from(document.querySelectorAll('.item-checkbox'));
        //获取全选按钮元素
        const selectAllBtn = document.getElementById('select-all');
        // 获取取消按钮元素
        const deselectAllBtn = document.getElementById('deselect-all');
        //获取反选按钮元素
        const toggleBtn = document.getElementById('toggle-selection');

        //为全选按钮添加点击事件监听器，当点击时，调用 selectAll 函数，将所有复选框的选中状态设置为 true
        selectAllBtn.addEventListener('click', () => selectAll(checkboxes, true));
        //为取消按钮添加点击事件监听器，当点击时，调用 selectAll 函数，将所有复选框的选中状态设置为 false
        deselectAllBtn.addEventListener('click', () => selectAll(checkboxes, false));
        //为反选按钮添加点击事件监听器，当点击时，调用 toggleSelection 函数，将所有复选框的选中状态取反
        toggleBtn.addEventListener('click', () => toggleSelection(checkboxes));
    });

    // let listItems = document.querySelectorAll('li');
    
</script>